<!-- 用途：用于支持字符串和数字类型的输入，同时进行数据转换 -->
<script setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
    data: {
        type: [String, Number]
    },
    inputWidth: {
        type: String,
        default: '140px'
    },
    placeholder: {
        type: String,
        default: "请输入内容"
    },
    // 判断是否需要默认值
    defaultValue: {
        type: [String, Number],
        default: "25%"
    }
})
let inputData = ref('')
const emits = defineEmits(['update:data'])
const inputChanged = () => {
    emits('update:data', Number(inputData.value)?Number(inputData.value):inputData.value)
    if(inputData.value == 0){
        emits('update:data', Number(inputData.value))
    }
    // }else{
    //     emits('update:data', Number(inputData.value)?Number(inputData.value):inputData.value)
    // }
}
onMounted(()=>{
    console.log("props.data:", props.data)
    if (props.data === '' || props.data == null) {
        console.log("我是'':", props.data)
        inputData.value = props.defaultValue
    } else {
        inputData.value = props.data
    }
})
</script>

<template>
  <el-input v-model.trim="inputData" :placeholder="props.placeholder" :style="{width: props.inputWidth}"  @change="inputChanged"/>
</template>  

<style scoped>

</style>